<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="filters">
				<el-form-item>
					<el-input v-model="filters.title" placeholder="商品"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="loadMore">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button @click.native="importFormVisible = true">导入数据</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<template>
			<el-table :data="commoditys" highlight-current-row v-loading="loading" style="width: 100%;">
				<el-table-column prop="auctionId" label="淘宝id" width="100" sortable>
				</el-table-column>
				<el-table-column prop="title" label="商品标题" width="200" sortable>
				</el-table-column>
				<el-table-column prop="cateName" label="类别" width="120" sortable>
				</el-table-column>
				<el-table-column prop="price" label="价格" width="120" sortable>
				</el-table-column>
				<el-table-column prop="biz30day" label="月销售" width="120" sortable>
				</el-table-column>
				<el-table-column prop="shopTitle" label="店铺" width="120" sortable>
				</el-table-column>
				<el-table-column prop="platformType" label="平台" width="120" sortable>
				</el-table-column>
			</el-table>
		</template>

		<!--导入数据-->
		<el-dialog title="导入" v-model="importFormVisible" :close-on-click-modal="false">
			<el-upload class="upload-demo" drag action="/v1/commodity/import" :on-success="showTip" :show-file-list="false" :on-progress="showLoading" v-loading="uploading">
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">只能上传csv文件，且不超过50MB</div>
			</el-upload>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="importFormVisible = false">关闭</el-button>
			</div>
		</el-dialog>
	</section>
</template>
<script>
	import { getCommodity } from '../../api/api';
	//import NProgress from 'nprogress'
	export default {
		data() {
			return {
				filters: {
					title: '',
					lastId: 0,
					lastTitle: ''
				},
				importFormVisible: false,
				loading: false,
				uploading: false,
				findNext: true,
				commoditys: [
				]
			}
		},
		methods: {
			showLoading: function(event, file, fileList) {
				this.uploading = true
			},
			showTip: function(response, file, fileList) {
				console.log(response.data)
				this.$message({
				  message: response.data,
				  type: 'info',
				  duration: 3000
				});
				this.importFormVisible = false
				this.uploading = false
				this.getCommoditys()
				return
			},
			getCommoditys: function() {
				let para = {
					keyword: this.filters.title,
					id: this.filters.lastId
				};
				this.loading = true;
				getCommodity(para).then((res) => {
					let { info, data } = res
					if (!info.ok) {
						this.$message({
						  message: info.message,
						  type: 'error',
						  duration: 1500
						});
						return
					}

					this.commoditys = data;
					if (this.commoditys.length > 0) {
						this.filters.lastId = this.commoditys[this.commoditys.length-1].id
					}
					this.loading = false;
					//NProgress.done();
				});
			},
			loadMore: function () {
				// 是否开启查找下一页
				if (this.filters.lastId > 0 && !this.findNext) {return}

				if (this.filters.lastTitle != this.filters.title) {
					this.filters.lastId = 0
					this.filters.lastTitle = this.filters.title
				}

				let para = {
					keyword: this.filters.title,
					id: this.filters.lastId
				};
				this.loading = true;
				setTimeout(
					getCommodity(para).then((res) => {
						let { info, data } = res
						if (!info.ok) {
							this.$message({
							  message: info.message,
							  type: 'error',
							  duration: 1500
							});
							return
						}

						let commoditys = data;
						if (commoditys.length > 0) {
							this.filters.lastId = commoditys[commoditys.length-1].id
						}

						for (var i = commoditys.length - 1; i >= 0; i--) {
							this.commoditys.push(commoditys[i])
						}
						
						this.loading = false;
						//NProgress.done();
					})
					, 1500)
				//NProgress.start();
			}
		},
		mounted() {
			this.getCommoditys();
		}
	};

</script>

<style scoped>

</style>